<!--info.less-->
<template>
	<section id="securityOpwd">
		<HeaDer :Title='titleData'></HeaDer>
		<section class="opwdWarp">
			<section class="title">
				<h2>设置支付密码</h2>
				<span class="alse">8-20个字符,不可以是纯数字或纯字母</span>
			</section>
			<section class="formWarp">
				<van-cell-group>
					<van-field v-model="userData.pw1" placeholder="请输入密码" :type='isShow.type' :icon="isShow.icon" @click-icon='switchs(1)' />
					<van-field v-model="userData.pw2" placeholder="请再次输入密码" :type='isShow.otype' :icon="isShow.oicon" @click-icon='switchs(2)' />
				</van-cell-group>

				<section class="mobile">
					<span>手机号:</span>
					<span>{{$public.phoneEncryption(userData.mobile)}}</span>
				</section>
				<section class="codeWarp">
					<van-field v-model="userData.code" placeholder="请输入验证码" icon="close" @click-icon="userData.code='' " />
					<input type="button" :value="btnCode.val" :disabled="btnCode.disabled" class="prompt" @click="getCode">
				</section>
				<section class="btnWarp" @click="submit">
					<section class="btn">
						确定
					</section>
				</section>
			</section>
		</section>
	</section>
</template>

<script>
	import HeaDer from "../common/header.vue";
	export default {
		data() {
			return {
				btnCode: {
					time: 59,
					disabled: false, //控制点击和不可点击
					val: '获取验证码'
				},
				titleData: {
					name: '',
					flat: 1
				},
				//控制密码显隐和icon数据
				isShow: {
					icon: 'password-not-view',
					type: 'password',
					oicon: 'password-not-view',
					otype: 'password'
				},
				userData: {
					pw1: '', //密码1 
					pw2: '', //密码2
					code: '', //验证码 
					mobile: '' //手机号
				}
			}
		},
		methods: {
			//密码显隐控制函数
			switchs(index) {
				this.$public.switchs(index, this);

			},
			getCode() {
				/*
				 1 先判断上面得信息输入的正确性
				 2请求验证码接口
				 * */
				var _this = this;
				if(!_this.$public.pwd(_this.userData.pw1) || !_this.$public.pwd(_this.userData.pw2)) {
					_this.$toast('密码格式有误');
					return false
				} else if(_this.userData.pw1 != _this.userData.pw2) {
					_this.$toast('两次输入密码不一致');
					return false
				}
				_this.$public.getCode(sessionStorage.mobile, 4, _this);

			},
			submit() {
				/*
				  1,判断验证码格式输入的正确性 再次判断密码的格式
				  2,请求接口
				 * */
				var _this = this;
				if(!_this.$public.pwd(_this.userData.pw1) || !_this.$public.pwd(_this.userData.pw2)) {
					_this.$toast('密码格式有误');
					return false
				} else if(_this.userData.pw1 != _this.userData.pw2) {
					_this.$toast('两次输入密码不一致');
					return false
				} else if(!_this.$public.code(_this.userData.code)) {
					_this.$toast('验证码格式有误');
					return false
				}
				_this.$public.loading('设置中...',_this);
				_this.$http.post(_this.$host.reset_tpwd, _this.userData).then(function(data) {
					_this.$toast(data.data.msg);
					if(data.data.status == 200) {
						_this.$public.go('security', 200, _this);
					} else {
						_this.userData.pw1 = '';
						_this.userData.pw2 = '';
						_this.userData.code = '';
					}
				}).catch(function() {})

			}
		},
		components: {
			'HeaDer': HeaDer

		},
		created: function() {
			var _this = this;
			_this.userData.mobile = sessionStorage.mobile;

		}
	}
</script>

<style>

</style>